<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #click {
        background-color: red;
        width: 100px;
        height: 100px;
        filter: alpha(opacity:50);   /*IE浏览器专用*/

    }

    pre {
        font-size: 26px;
        font-weight: bolder;
    }
</style>
<body>

<pre>
知识点:
    setInterval: 设置时间间隔
    opacity : css设置透明度
    js实现渐变色.....

    
</pre>


<div id="click">click it</div>


</body>

<script>

    var timer = null;
    var clickDiv = document.getElementById("click");

    clickDiv.onmouseover = function () {    // 鼠标进来触发
        clearInterval(timer);   // 清除所有的定时器  防止叠加
        var speed = 1.0;
        timer = setInterval(function () {
            clickDiv.style.opacity = speed;
            speed -= 0.1;
        }, 100); // 这个数字设置的是时间间隔
    };

    clickDiv.onmouseout = function () {
        // alert("鼠标出去触发事件.....")
    };



</script>
</html>